<template>
    <div class="app" style="position: relative;">
        <div class="logo" style="position:absolute;left:10px;top:30px;font-weight:bolder;font-size:18px">
            门户首页
        </div>

        <!-- 下面为统计框 -->
        <div class="stats shadow" style="position: absolute;top:100px;left:130px;width:800px">

            <div class="stat">
                <div class="stat-figure text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        class="inline-block w-8 h-8 stroke-current">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                        </path>
                    </svg>
                </div>
                <div class="stat-title">点赞总数</div>
                <div class="stat-value text-primary">{{ totalLikes }}</div>
            </div>

            <div class="stat">
                <div class="stat-figure text-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        class="inline-block w-8 h-8 stroke-current">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <div class="stat-title">评论总数</div>
                <div class="stat-value text-secondary">{{ totalComments }}</div>
            </div>

            <div class="stat">
                <div class="stat-figure text-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        class="inline-block w-8 h-8 stroke-current">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="stat-title">帖子总数</div>
                <div class="stat-value text-accept">{{ totalCards }}</div>
            </div>

        </div>

        <div class="hot">
            <div class="title" style="text-align: center;font-weight:bolder;font-size:20px;padding-top:270px">人气榜</div>
        </div>


        <div class="card w-80  bg-primary text-primary-content" style="float: left;margin-left:40px;margin-top:30px"
            v-if="cards[0].Pic.length == 0">
            <div class="card-body">
                <h2 class="card-title">{{ cards[0].From }}的表白卡</h2>
                <h3 class="card-desc" style="font-size: 15px;">{{ cards[0].To }}</h3>
                <p>{{ cards[0].Body }}</p>
                <div class="card-actions justify-end">
                    <div class="svg" style="position:relative;left:-130px;top:20px">
                        <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                            <path
                                d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                fill="#DD6767" p-id="2427"></path>
                        </svg>
                        <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                            cards[0].Like.length
                        }}</a>
                    </div>

                    <button class="btn" @click="() => $router.push('/card/' + cards[0].Id).catch(err => { })">查看详情</button>
                </div>
            </div>
        </div>

        <div class="card w-80 bg-base-100 shadow-xl" style="float: left;margin-left:40px;margin-top:30px" v-else>
            <div class="card-body">
                <h2 class="card-title">{{ cards[0].From }}的表白卡</h2>
                <h3 class="card-desc" style="font-size: 15px;">TO {{ cards[0].To }}</h3>
                <p>{{ cards[0].Body }}</p>
                <div class="card-actions justify-end">
                    <div class="svg" style="position:relative;left:-130px;top:20px">
                        <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                            <path
                                d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                fill="#DD6767" p-id="2427"></path>
                        </svg>
                        <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                            cards[0].Like.length
                        }}</a>
                    </div>

                    <button class="btn" @click="() => $router.push('/card/' + cards[0].Id).catch(err => { })">查看详情</button>
                </div>
            </div>
            <figure><img :src="cards[0].Pic" alt="404" />
            </figure>
        </div>

        <div class="card w-80  bg-green-500 text-primary-content" style="float: left;margin-left:40px;margin-top:30px"
            v-if="cards[1].Pic.length == 0">
            <div class="card-body">
                <h2 class="card-title">{{ cards[1].From }}的表白卡</h2>
                <h3 class="card-desc" style="font-size: 15px;">{{ cards[1].To }}</h3>
                <p>{{ cards[1].Body }}</p>
                <div class="card-actions justify-end">
                    <div class="svg" style="position:relative;left:-130px;top:20px">
                        <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                            <path
                                d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                fill="#DD6767" p-id="2427"></path>
                        </svg>
                        <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                            cards[1].Like.length
                        }}</a>
                    </div>

                    <button class="btn" @click="() => $router.push('/card/' + cards[1].Id).catch(err => { })">查看详情</button>
                </div>
            </div>
        </div>

        <div class="card w-80 bg-base-100 shadow-xl" style="float: left;margin-left:40px;margin-top:30px" v-else>
            <div class="card-body">
                <h2 class="card-title">{{ cards[1].From }}的表白卡</h2>
                <h3 class="card-desc" style="font-size: 15px;">TO {{ cards[1].To }}</h3>
                <p>{{ cards[1].Body }}</p>
                <div class="card-actions justify-end">
                    <div class="svg" style="position:relative;left:-130px;top:20px">
                        <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                            <path
                                d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                fill="#DD6767" p-id="2427"></path>
                        </svg>
                        <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                            cards[1].Like.length
                        }}</a>
                    </div>

                    <button class="btn" @click="() => $router.push('/card/' + cards[1].Id).catch(err => { })">查看详情</button>
                </div>
            </div>
            <figure><img :src="cards[1].Pic" alt="404" />
            </figure>
        </div>


        <div class="card w-80  bg-accent text-primary-content" style="float: left;margin-left:40px;margin-top:30px"
            v-if="cards[2].Pic.length == 0">
            <div class="card-body">
                <h2 class="card-title">{{ cards[2].From }}的表白卡</h2>
                <h3 class="card-desc" style="font-size: 15px;">{{ cards[2].To }}</h3>
                <p>{{ cards[2].Body }}</p>
                <div class="card-actions justify-end">
                    <div class="svg" style="position:relative;left:-130px;top:20px">
                        <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                            <path
                                d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                fill="#DD6767" p-id="2427"></path>
                        </svg>
                        <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                            cards[2].Like.length
                        }}</a>
                    </div>

                    <button class="btn" @click="() => $router.push('/card/' + cards[2].Id).catch(err => { })">查看详情</button>
                </div>
            </div>
        </div>

        <div class="card w-80 bg-base-100 shadow-xl" style="float: left;margin-left:40px;margin-top:30px" v-else>
            <div class="card-body">
                <h2 class="card-title">{{ cards[2].From }}的表白卡</h2>
                <h3 class="card-desc" style="font-size: 15px;">TO {{ cards[2].To }}</h3>
                <p>{{ cards[2].Body }}</p>
                <div class="card-actions justify-end">
                    <div class="svg" style="position:relative;left:-130px;top:20px">
                        <svg t="1686324240725" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2426" width="16" height="16">
                            <path
                                d="M436.492516 162.206151c44.159431 35.26656 106.850987 35.26656 151.012693 0 110.437262-88.243769 260.100551-73.525476 343.442773-1.470009 104.741547 90.551182 104.741547 271.653547 0 452.753636-63.567644 117.766827-213.742933 235.531378-354.957084 323.7888a120.973084 120.973084 0 0 1-127.984071 0C306.792676 849.021156 156.615111 731.256604 93.047467 613.489778c-104.736996-181.100089-104.736996-362.202453 0-452.753636 83.344498-72.055467 233.007787-86.77376 343.445049 1.470009z"
                                fill="#DD6767" p-id="2427"></path>
                        </svg>
                        <a style="color: #C63420;font-weight:bolder;position:relative;top:-20px;left:30px">{{
                            cards[2].Like.length
                        }}</a>
                    </div>

                    <button class="btn" @click="() => $router.push('/card/' + cards[2].Id).catch(err => { })">查看详情</button>
                </div>
            </div>
            <figure><img :src="cards[2].Pic" alt="404" />
            </figure>
        </div>

    </div>
</template>

<script>
import { getStats, getTopCards } from '../utils/LoveOnChain'
export default {
    name: "index",
    data() {
        return {
            totalCards: 0,
            totalComments: 0,
            totalLikes: 0,
            cards: []
        }
    },
    async created() {
        try {
            const stats = await getStats();

            if (stats) {
                const [totalCards, totalComments, totalLikes] = stats;
                this.totalCards = totalCards;
                this.totalComments = totalComments;
                this.totalLikes = totalLikes;
            } else {
                console.error('Unable to fetch stats.');
            }

            //获取排名前三的表白卡
            const result = await getTopCards();
            this.cards = result.map(card => {
                let newCard = { ...card };
                if (newCard.From.length > 20) {
                    newCard.From = newCard.From.slice(0, 6) + '...' + newCard.From.slice(-4);
                }
                if (newCard.To.length > 20) {
                    newCard.To = newCard.To.slice(0, 10) + '...' + newCard.To.slice(-7);
                }
                return newCard;
            });
        } catch (error) {
            console.error('An error occurred while fetching stats:', error);
        }
    }

}
</script>

<style scoped>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.app {
    position: absolute;
    top: 80px;
    width: 80%;
    float: right;
    height: 89vh;
    overflow-y: auto;
}
</style>